<template>
  <div>
    <h3>{{ title }}</h3>
    <h3>{{ title.substr(0, 3) + "..." }}</h3>
    <h3>{{ mysubstr(title) }}</h3>
    <h3>{{ mytitle }}</h3>
    <hr />
    <!-- 变量 | 过滤器 -->
    <h3>{{ title | strFilter }}</h3>
    <h3>{{ title | strFilter2(10) }}</h3>
    <hr />
    <!-- 全局过滤器 -->
    <h3>{{ title | substr2(5) }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "1点点、茶百道、7分甜、都可、熊姬都出事了！这样的奶茶还想喝吗？",
    };
  },
  // 局部过滤器 过滤器的定义和methods中的方法定义是一致的
  filters: {
    // 过滤器方法的参数1，永久给中横线上面的数据所用
    strFilter(value) {
      return value.substr(0, 6) + "...";
    },
    // 参数2，就是给在过滤器后面使用小括号参数所用
    strFilter2(value, len = 6) {
      return value.substr(0, len) + "...";
    },
  },
  // 计算属性
  computed: {
    mytitle() {
      return this.title.substr(0, 3) + "...";
    },
  },
  methods: {
    mysubstr(str = "") {
      return str.substr(0, 3) + "...";
    },
  },
};
</script>

<style lang='scss' scoped>
</style>